import './main.scss'
import { defineComponent } from 'vue'
import { ElDialog, ElButton } from 'element-plus'

export default defineComponent({
  name: 'Dialog',
  props: {
    state: {
      type: Object,
      default: () => ({
        visible: false,
        width: '30%',
        title: '',
        content: '',
        footer: ['取消', '确定']
      })
    },
    draggable: {
      type: Boolean,
      default: false
    }
  },
  emit: ['closed', 'cancel', 'confirm'],
  setup(props, { emit, slots }) {
    const onClosed = () => {
      emit('closed')
    }
    const onCancel = () => {
      emit('cancel')
    }
    const onConfirm = () => {
      emit('confirm')
    }
    // 渲染标题
    const renderHeader = () => {
      return <>{slots.header?.() || <div class="title">{props.state.title}</div>}</>
    }
    // 渲染内容
    const renderDefault = () => {
      return <>{slots.default?.() || <div class="default_content">{props.state?.content}</div>}</>
    }
    // 渲染底部按钮
    const renderFooter = () => {
      return (
        <>
          {slots.footer?.() || (
            props.state.footer ? <div style={{ textAlign: props.state.footer[2] }}>
              <ElButton onClick={onCancel}>{props.state.footer[0]}</ElButton>
              <ElButton type="primary" onClick={onConfirm}>
                {props.state.footer[1]}
              </ElButton>
            </div> : ''
          )}
        </>
      )
    }
    return () => (
      <ElDialog vModel={props.state.visible} width={props.state.width} draggable={props.draggable} closed={onClosed}>
        {{
          header: () => renderHeader(),
          footer: () => renderFooter(),
          default: () => renderDefault()
        }}
      </ElDialog>
    )
  }
})
